<template>
	<view>
		<view class="item" v-for="(item,index) in orderItems" :key="item.shoppingCartId">
			<uni-section :title="'订单'+(index+1)" type="line">
				<uni-card :title="item.commodityName" :sub-title="item.provider+' '+' 捐 '" :extra="'单价:'+item.price"
					:thumbnail="item.photoOne">
					<view class="order">
						<view class="star">
							总价：{{ item.quantity*item.price }}
							<image src="/static/星星.png" />
						</view>
						<view v-if="item.ordersStatus === 0" class="pay">
							<view class="buy" @click="pay(item)">购买</view>
							<view class="cancel" @click="cancel(item)">取消订单</view>
						</view>

						<view v-else-if="item.ordersStatus === 1">已取消</view>
						<view v-else-if="item.ordersStatus === 2">已支付</view>

						<!-- <view>{{item.ordersStatus}}</view> -->
						<!-- <view class="pay" @click="pay(item)">购买</view>
						<view class="cancel" @click="cancel(item)">取消订单</view> -->
					</view>
					<!-- <text class="uni-body">{{item.name}}</text> -->
				</uni-card>
			</uni-section>
		</view>

		<view class="bottom"></view>
	</view>

	<view class="shopCar">
		<view class="left">
			<view class="number">{{ pay_number }}</view>
			<view class="price">总计:
				{{ pay_star }}
				<view class="star_picture">
					<image src="/static/星星.png" />
				</view>
			</view>
			<!-- <view class="detail" @click="inputDialogToggle">详情</view> -->
		</view>
		<view class="block"></view>
		<view :class="number != 0 ? 'right active' : 'right'" @click="payAll()">全部购买</view>
	</view>
</template>

<script>
	import {
		BASE_URL
	} from '/api';
	// import store from '/pages/store/index.js';
	// import shop from '/pages/shop/shop.vue'
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		// computed: {
		// 	...mapState(['token', 'children'])
		// },
		computed: {
			// ...mapState(['orderItems', 'number', 'total_star', 'pay_number', 'pay_star'])
			pay_number: function() {
				return this.orderItems.reduce(function(total, item) {
					return item.ordersStatus === 0 ? total + item.quantity : total;
				}, 0);
			},
			pay_star: function() {
				return this.orderItems.reduce(function(total, item) {
					return item.ordersStatus === 0 ? total + item.quantity * item.price : total;
				}, 0);
			},
			...mapState(['token', 'children'])
		},

		data() {
			return {
				cover: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
				avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
				extraIcon: {
					color: '#4cd964',
					size: '22',
					type: 'gear-filled'
				},
				// buyData: {},
				index: 0,
				orderItems: [],
				id: 'qweasdzxc',
			}
		},
		onLoad() {
			// this.updatePayNumber()
			// this.updatePayStar()
			// console.log(this.filteredItems, 66)
		},


		onShow() {
			this.GetItems();
			// console.log("我是测试哦");
			// console.log(this.orderItems, "测试");
		},
		methods: {
			onClick() {
				console.log(this.buy_items)
			},
			GetItems() {
				uni.request({
					url: BASE_URL + '/orders/children',
					method: 'GET',
					header: {
						"Authorization": this.token,
					},
					data: {
						childrenId: this.id,
					},
					success: (res) => {
						this.orderItems = res.data.data;
						console.log("我是order");
						console.log(this.orderItems);
						// this.text = 'request success';
						// console.log(this.text);
					}
				});
			},
			// actionsClick(text) {
			// 	uni.showToast({
			// 		title: text,
			// 		icon: 'none'
			// 	})
			// },

			cancel(item) {
				// console.log(item);
				item.ordersStatus = 1;
				// console.log(item);
				uni.request({
					url: BASE_URL + '/orders/update',
					method: 'Post',
					header: {
						"Authorization": this.token,
					},
					data: item,
					success: (res) => {
						// this.orderItems = res.data.data;
						console.log("我是取消订单");
						console.log(res.data);
						this.GetItems()
						// this.text = 'request success';
						// console.log(this.text);
					}
				});

			},
			pay(item) {
				// this.deleteOrder(item)
				// this.deletePayNumber(item)
				// this.deletePayStar(item)
				// this.payOne(item)
				console.log(item);
				uni.request({
					url: BASE_URL + '/orders/pay',
					method: 'Post',
					header: {
						"Authorization": this.token,
					},
					data: [item.orderId],
					success: (res) => {
						// this.orderItems = res.data.data;
						console.log("我是购买订单");
						console.log(res.data);
						this.GetItems()
						// this.text = 'request success';
						// console.log(this.text);
					}
				});
			},
			payAll() {
				// this.payForAll()
				// this.emptyCart()
				let items = this.orderItems.filter(item => item.ordersStatus === 0);
				let orderIds = items.map(item => item.orderId);
				uni.request({
					url: BASE_URL + '/orders/pay',
					method: 'Post',
					header: {
						"Authorization": this.token,
					},
					data: orderIds,
					success: (res) => {
						// this.orderItems = res.data.data;
						console.log("我是购买订单");
						console.log(res.data);
						this.GetItems()
						// this.text = 'request success';
						// console.log(this.text);
					}
				});
			},
			// ...mapActions(['deleteOrder', 'updateNumber', 'addNumber', 'deleteNumber', 'updateStar',
			// 	'addStar', 'deleteStar', 'deleteAllStar', 'updatePayNumber', 'updatePayStar', 'deletePayNumber',
			// 	'deletePayStar', 'payOne', 'payForAll', 'emptyCart'
			// ])
		},
	}
</script>

<style lang="scss">
	.order {
		display: flex;
		flex-flow: row;
		align-items: center;

		.star {
			width: 300upx;

			image {
				width: 30upx;
				height: 30upx;
				// margin-top: 50px;
			}
		}


		.pay {
			display: flex;
			flex-flow: row;
			align-items: center;
			// width: 10upx;
			// margin-left: 10px;
			
			.buy {
				// writing-mode: horizontal-tb;
				// margin-left: 0px;
				// width: 100px;
				margin-left: 40upx;
				font-weight: bold;
				color: blue;
			}

			.cancel {
				// writing-mode: horizontal-tb;
				// width: 200px;
				margin-left: 40upx;
				font-weight: bold;
				color: red;
			}
		}

	}

	.shopCar {
		position: fixed;
		bottom: 30rpx;
		margin-left: 140upx;
		display: flex;
		// justify-content: center;
		// align-items: center;
		height: 90rpx;

		.left {
			display: flex;
			background-color: #565658;
			border-radius: 45rpx 0 0 45rpx;

			.price {
				width: 180rpx;
				height: 90rpx;
				line-height: 90rpx;
				color: #fff;
				// padding: 0 20rpx;
				display: flex;
				flex-flow: row;
				justify-content: space-between;

				.star_picture {
					image {
						width: 50upx;
						height: 50upx;
						margin-top: 20upx;
					}
				}
			}

			.detail {
				width: 100rpx;
				height: 90rpx;
				padding: 20upx 16upx;
			}

			.number {
				width: 90rpx;
				height: 90rpx;
				background-color: #d81e06;
				border-radius: 50%;
				text-align: center;
				line-height: 90rpx;
				color: #fff;
			}
		}

		.block {
			width: 10rpx;
			height: 90rpx;
			background-color: #fff;
		}

		.right {
			color: #fff;
			background-color: #d5d5d5;
			height: 90rpx;
			line-height: 90rpx;
			padding: 0 20rpx;
			border-radius: 0 40rpx 40rpx 0;
		}

		.active {
			background-color: orange !important;
		}
	}

	.bottom {
		// background-color: #e6e6e6;
		height: 120upx;
	}
</style>